<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<title>发布</title>
		<script src="../../static/js/jquery-3.1.1.min.js"th:src="@{/js/jquery-3.1.1.min.js}"></script>
		
		<script src="../../static/lib/editormd/editormd.min.js"th:src="@{/lib/editormd/editormd.min.js}"></script>
		<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
		
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
	
		<link rel="stylesheet" href="../../static/css/menu.css"th:href="@{/css/menu.css}"/>
		
		<link rel="stylesheet"href="../../static/lib/editormd/css/editormd.css" th:href="@{/lib/editormd/css/editormd.css}"/>
		
	</head>
	<body>
		<!-- 导航 -->
		<nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
			<div class="ui container">
				<div class="ui inverted secondary stackable menu">
					<h2 class="ui teal header item">管理后台</h2>
					<a href="#"th:href="@{/admin/blogs}"class=" m-item item m-mobile-hide"><i class=" home icon"></i>博客</a>
					<a href="#"th:href="@{/admin/types}"class="m-item item m-mobile-hide"><i class=" idea icon"></i>分类</a>
					<a href="#"th:href="@{/admin/tags}"class="m-item item m-mobile-hide"> <i class=" tags icon"></i>标签</a>
					<div class=" right m-item m-mobile-hide  menu">
						<div class="ui dropdown item">
							<div class="text">
							      <img class="ui avatar image" src="../../static/img/2.png"th:src="@{/img/2.png}"style="width: 30px ;height: 30px;">
							      林无敌
							    </div>
								<i class="dropdown icon"></i>
								<div class="menu">
									<a href="#"class="item">注销</a>
								</div>
						</div>
					</div>
				</div>
			</div>
			<a href="#" class="ui menu toggle black icon button m-top-right m-mobile-show ">
				<i class="sidebar icon"></i>
			</a>
		</nav>
		<!-- 二级导航 -->
		<div class="ui attached pointing menu">
			<div class="ui container">
				<div class="right menu">
					<a href="#"th:href="@{/admin/types/input}"class="item">发布</a>
					<a href="#"th:href="@{/admin/types}"class=" item">列表</a>
				</div>
				
			</div>
			
		</div>
		<!-- 大中间内容 -->
		<div class="m-padded-tb-large m-container">
			<div class="ui container">
				<!-- 头部 -->
				<form id="blog-form" action="#" th:action="@{/admin/blogs}"method="post"class="ui form">
					<input type="hidden"name="published">

					<div class=" required field">
						<div class="ui left labeled input">
							<div class="ui  selection compact teal basic dropdown label">
								<input type="hidden" value="原创"  name="flag" />
								<i class="dropdown icon"></i>
								<div class="default text" >原创</div>
								<div class="menu">
								<div class="item" data-value="原创">原创</div>
								<div class="item" data-value="转载">转载</div>
								<div class="item" data-value="翻译">翻译</div>
							</div>
							</div>
							<input type="text"name="title"placeholder="标题" />
						</div>
						
					</div>
					<div class="required field">
						<div id="md-content"style="z-index: 1!important;" >
							<textarea placeholder="博客内容" name="content" style="display: none">

							</textarea>
							</div>
						</div>
						
					<div class="two fields">
						<div class="required field">
							<div class="ui left labeled action input">
								<label class="ui compact teal basic label">分类</label>
								<div class="ui fluid selection dropdown">
									<input type="hidden" name="type.id"/>
									<i class="dropdown icon"></i>
									<div class="default text">分类</div>
									<div class="menu">
										<div th:each="type:${types}" class="item" th:data-value="${type.id}"th:text="${type.name}">错误日志</div>

									</div>
								</div>
							</div>
						</div>
						
						<div class="field">
							<div class="ui left labeled action input">
								<label class="ui compact teal basic label">标签</label>
								<div class="ui fluid multiple search selection dropdown">
									<input type="hidden"name="tagIds" />
									<i class="dropdown icon"></i>
									<div class="default text">标签</div>
									<div class="menu">
										<div th:each="tag : ${tags}" class="item" th:text="${tag.name}" th:data-value="${tag.id}" data-value="1">java</div>
									</div>
								</div>
							</div>
							
						</div>
						
					</div>
					<div class="required field">
						<div class="ui left labeled input">
							<label class="ui teal basic label">首图</label>
						
						<input type="text"name="firstPicture"  placeholder="首图引用地址" />
						</div>
					</div>
					
					<div class="inline fields">
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox"id="recommend"   checked="" name="recommend" class="hidden" />
									<label for="recommend">推荐</label>
							</div>
						</div>
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox"id="shareStatement"  name="shareStatement" class="hidden" />
									<label for="shareStatement">转载声明</label>
							</div>
						</div>
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox"id="appreciation"   name="appreciation" class="hidden" />
									<label for="appreciation">赞赏</label>
							</div>
						</div>
						<div class="field">
							<div class="ui checkbox">
								<input type="checkbox"id="commentabled"   name="commentabled" class="hidden" />
									<label for="commentabled">评论</label>
							</div>
						</div>
					</div>
					<div class="ui error message"></div>
					<div class="ui right aligned container">
						<button type="button"onclick="window.history.go(-1)" class="ui button">返回</button>
						<button id="save-btn" type="button" class="ui secondary button">保存</button>
						<button id="publish-btn" type="button"  class="ui teal button">发布</button>
					</div>
				</form>
	
				</div>
			
			
			
		</div>
		<!-- 底部footer -->
		<footer class="ui inverted vertical segment m-padded-tb-massive">
			<div class="ui center aligned container">
				<div class="ui stackable inverted divided grid">
					<div class="three wide column">
						<div class="ui inverted link list">
							<div class="item">
						<img src="../../static/img/1.png"th:src="@{/img/1.png}" class="ui rounded image" alt=""style="width: 100px;"/>
					         </div>
						</div>
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header">最新博客</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
						</div>
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header">最新博客</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
							<a href="#" class="item">用户故事</a>
						</div>
					</div>
					<div class="seven wide column">
						<h4 class="ui inverted header">最新博客</h4>
						<p class="m-text-thin m-text-space m-opacity-mini">这是一个傻逼的博客，看了会很丑陋</p>
					</div>
				</div>
				<div class="ui inverted section divider"></div>
				<p class="m-text-thin m-text-space m-opacity-mini">请联系我</p>
			</div>
			
		</footer>
	
		<script>
		// 初始化markdown编辑器
		var contentEditor;
		$(function() {
		    contentEditor = editormd("md-content", {
		        width   : "100%",
		        height  : 640,
		        syncScrolling : "single",
		        path    : "/lib/editormd/lib/"
		    });
		    
		    /*
		    // or
		    testEditor = editormd({
		        id      : "test-editormd",
		        width   : "90%",
		        height  : 640,
		        path    : "../lib/"
		    });
		    */
		});
		
		$('.menu.toggle').click(function(){
			$('.m-item').toggleClass('m-mobile-hide');
			
		});
		$('.ui.dropdown').dropdown({
			on:'hover'
		});
		
		$('#save-btn').click(function () {
			$('[name="published"]').val(false);
			$('#blog-form').submit();
			});

		$('#publish-btn').click(function () {
			$('[name="published"]').val(true);
			$('#blog-form').submit();

		});

		$('.ui.form').form({
			fields:{
				title:{
					identifier:'title',
					rules:[{
						type:'empty',
						prompt:'标题，请输入标题内容'
					}]

				},
				content:{
					identifier:'content',
					rules:[{
						type:'empty',
						prompt:'标题，请输入博客内容'
					}]

				},
				typeId:{
					identifier:'typeId',
					rules:[{
						type:'empty',
						prompt:'标题，请输入博客分类'
					}]

				},
				firstPicture:{
					identifier:'firstPicture',
					rules:[{
						type:'empty',
						prompt:'标题，请输入首图'
					}]

				}
			}
		});
		
		
		</script>
	</body>
</html>
